<template>
    <div>
        <NavHeader :isDisSearch="false" />
        <!-- 内容区域 -->
        <div class="cart-box">
            <div class="search-box">
                <div>
                    <el-input
                        size="large"
                        clearable
                        @keyup.enter="getOrderDetail(findCondition)"
                        v-model="findCondition.license_plate"
                        style="width: 240px; margin-right: 20px"
                        placeholder="请输入车牌号码, Enter 键搜索 "
                    />
                    <el-select
                        v-model="findCondition.order_status"
                        placeholder="选择状态"
                        size="large"
                        style="width: 240px"
                        @change="onChangeSel"
                    >
                        <el-option
                            v-for="item in selectOpt"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </div>
            <div v-if="dataSource?.list?.length != 0">
                <Table
                    :columns="columns"
                    :dataSource="dataSource"
                    @pageChange="onPageChange"
                    @curChange="onCurChange"
                >
                    <!-- 图片插槽 -->
                    <template #cover="{ index, row }">
                        <div class="cover">
                            <Cover :cover="row.service.photo.url || ''"></Cover>
                            <div class="cove_text">{{ row.service?.service_point || '' }}</div>
                        </div>
                    </template>

                    <template #category="{ index, row }">
                        {{ row.service?.category || '' }}
                    </template>

                    <template #car="{ index, row }">
                        {{ row.car?.license_plate || '' }}
                    </template>

                    <template #brand="{ index, row }">
                        {{ row.car?.brand || '' }}
                    </template>

                    <template #status="{ index, row }">
                        <el-tag type="warning" v-if="row.order_status === '0'">待处理</el-tag>
                        <el-tag type="primary" v-else-if="row.order_status === '1'">处理中</el-tag>
                        <el-tag type="success" v-else-if="row.order_status === '2'">已完成</el-tag>
                        <el-tag type="grey" v-else>已完结</el-tag>
                    </template>

                    <template #cost="{ index, row }"> ¥ {{ row.service?.money || '' }} </template>

                    <template #op="{ index, row }">
                        <div class="op">
                            <a
                                v-if="row.order_status != '3'"
                                href="javascript:void(0);"
                                @click="accomplish(row)"
                                >完成</a
                            >
                            <a href="javascript:void(0);" v-else class="del" @click="onDel(row)">
                                删除
                            </a>
                        </div>
                    </template>
                </Table>
            </div>
            <div class="placeholder" v-else>未发现订单！</div>
        </div>
    </div>
</template>

<script setup>
import { getOrderByUserId } from '@/api/home'
import { reactive } from 'vue'
import { useUserInfo } from '../../store/index'
import { finished, deleteOrder } from '../../api/service'
const { userInfo } = useUserInfo()
import { ElMessageBox, ElMessage } from 'element-plus'

const findCondition = reactive({
    userId: userInfo.id,
    currentPage: 1,
    pageSize: 10,
    order_status: '0',
    license_plate: ''
})
// 0 待处理， 1处理中， 2已完成， 3.已结束'
const selectOpt = [
    {
        label: '待处理',
        value: '0'
    },
    {
        label: '处理中',
        value: '1'
    },
    {
        label: '已完成',
        value: '3'
    }
]

const dataSource = reactive({})

const getOrderDetail = async (findCondition) => {
    const res = await getOrderByUserId(findCondition)
    if (res.status !== 200) return
    Object.assign(dataSource, res.data)
}

getOrderDetail(findCondition)

const onPageChange = (pageSize) => {
    findCondition.pageSize = pageSize
    getOrderDetail(findCondition)
}

const onCurChange = (currentPage) => {
    findCondition.currentPage = currentPage
    getOrderDetail(findCondition)
}

const onChangeSel = (value) => {
    getOrderDetail(findCondition)
}

// 点击完成
const accomplish = async (row) => {
    const params = {
        carId: row.car.id,
        serviceId: row.service.id,
        orderId: row.id
    }

    if (row.order_status !== '2') {
        return ElMessageBox.confirm('当前订单还没有维修好，是否确定完成订单', '完成订单', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(async () => {
                const res = await finished(params)
                if (res.data.code === '901' || res.status !== 200) {
                    return ElMessage.console.error('修改状态失败！')
                }
                getOrderDetail(findCondition)
                ElMessage({
                    type: 'success',
                    message: '修改成功'
                })
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消修改'
                })
            })
    }

    const res = await finished(params)
    if (res.data.code === '901' || res.status !== 200) {
        return ElMessage.console.error('修改状态失败！')
    }
    getOrderDetail(findCondition)
    return ElMessage.success('修改成功！')
}

// 删除订单
const onDel = async (row) => {
    ElMessageBox.confirm('是否要删除该订单', '删除订单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            const res = await deleteOrder(row.id)
            if (res.data.code === '901' || res.status !== 200) {
                return ElMessage.console.error('删除失败！')
            }
            getOrderDetail(findCondition)
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除'
            })
        })
}

const columns = [
    {
        prop: 'service',
        label: '服务',
        width: 200,
        scopedSlots: 'cover',
        align: 'left'
    },
    {
        prop: 'service',
        label: '服务类型',
        scopedSlots: 'category',
        align: 'left'
    },
    {
        prop: 'car',
        label: '车牌号',
        scopedSlots: 'car',
        align: 'center'
    },
    {
        prop: 'car',
        label: '品牌',
        scopedSlots: 'brand',
        align: 'center'
    },
    {
        prop: 'car',
        label: '订单状态',
        scopedSlots: 'status',
        align: 'center'
    },
    {
        prop: 'cost',
        label: '单价',
        width: 150,
        scopedSlots: 'cost',
        align: 'center'
    },
    {
        prop: 'op',
        label: '操作',
        width: 120,
        align: 'center',
        scopedSlots: 'op'
    }
]
</script>

<style lang="scss" scoped>
.cart-box {
    width: 1120px;
    margin: 0 auto;

    .placeholder {
        color: #555;
        line-height: 80px;
        font-size: 24px;
    }

    .pay {
        border-top: 1px solid #ebeef5;
        padding: 15px 5px;
        overflow: hidden;
        text-align: right;
        color: #777;
        font-size: 14px;

        .btn-pay {
            display: inline-block;
            width: 120px;
            cursor: pointer;
            line-height: 36px;
            text-align: center;
            color: #fff;
            background-color: #95bf47;
            margin-left: 15px;
        }
    }

    .cover {
        display: flex;
        align-items: center;
        .cove_text {
            margin-left: 10px;
            text-overflow: ellipsis;
            overflow: hidden;
            text-wrap: nowrap;
        }
    }
    .del {
        color: red;
    }

    .search-box {
        padding: 20px 0;
        border-bottom: 1px solid #eee;
    }
}
</style>
